<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>06_列表渲染_过滤与排序</title>
</head>

<body>
  <!--
1. 列表过滤
2. 列表排序
-->
  <div id="app">
    <!-- v-model用来收集表单项数据 -->
    <input type="text" placeholder="请输入搜索名称" v-model="searchName" />
    <ul>
      <li v-for="person in searchPersons" :key="person.id">
        {{person.id}} - {{person.name}} - {{person.age}}
      </li>
    </ul>
    <!-- <button @click="setAscOrder">年龄升序</button>
    <button @click="setDescOrder">年龄降序</button>
    <button @click="setOriginOrder">原本顺序</button> -->

    <button @click="orderType = 'asc'">年龄升序</button>
    <button @click="orderType = 'desc'">年龄降序</button>
    <button @click="orderType = 'origin'">原本顺序</button>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    /*
      需求1: 数据动态展示
      需求2: 搜索功能
        1. 收集搜索名称 v-model
        2. 展示新数据 computed 、filter
      需求3: 排序功能
        升序 asc
        降序 desc
        原来顺序 origin
    */
    new Vue({
      el: '#app',
      data: {
        persons: [
          { id: 1, name: 'jack', age: 22 },
          { id: 2, name: 'rose', age: 18 },
          { id: 3, name: 'tom', age: 20 },
          { id: 4, name: 'jerry', age: 16 },
          { id: 5, name: 'marry', age: 28 },
          { id: 6, name: 'jim', age: 19 },
          { id: 7, name: 'mike', age: 21 },
        ],
        // 搜索名称
        searchName: '',
        // 排序类型：默认为原本顺序
        // 升序 asc
        // 降序 desc
        // 原来顺序 origin
        orderType: 'origin'
      },
      methods: {
        // 设置年龄的升序
        setAscOrder() {
          this.orderType = 'asc'

        },
        // 设置年龄的降序
        setDescOrder() {
          this.orderType = 'desc'
        },
        // 设置年龄的原本顺序
        setOriginOrder() {
          this.orderType = 'origin'
        },
      },
      // 计算数据
      computed: {
        // 一旦依赖的数据发生变化，就会重新计算
        searchPersons() {
          // 返回一个与searchName相关的persons数据
          const { searchName, persons, orderType } = this

          // 搜索
          const searchPersons = persons.filter(person => {
            // 返回true保留
            // 返回false过滤
            // if (person.name.indexOf(searchName) > -1) {
            //   return true
            // }
            // return false

            // if (person.name.includes(searchName)) {
            //   return true
            // }
            // return false

            return person.name.includes(searchName)
          })

          // 排序
          // 先搜索在排序：数据就少一点，性能更好点
          if (orderType === 'asc') {
            searchPersons.sort((a, b) => {
              return a.age - b.age
            })
          }

          if (orderType === 'desc') {
            searchPersons.sort((a, b) => {
              return b.age - a.age
            })
          }

          // 原本顺序，就是不要排序，就是原来的persons顺序

          // 计算属性要有返回值，返回值就是计算的结果
          return searchPersons
        }
      }
    })
  </script>
</body>

</html>